<template>
    <div>
      <div class="hd">
        <span @click="$router.go(-1)"> 返回 </span>
        添加代理
      </div>
      <md-steps
        :steps="steps"
        :current="step">
      </md-steps>

      <!--查找用户-->

      <div v-show="step==0">
        <md-field>
          <md-input-item
            title="手机号码"
            type="phone"
            placeholder="填写代理的手机号码"
            @change ="getwxUser"
          ></md-input-item>
        </md-field>

        <div class="wxinfo">
            <div class="wxavt" v-if="wxuser.head_img"><img :src="wxuser.head_img" alt=""  v-if="wxuser.head_img"> </div>
            <div class="wxname" v-if="wxuser.nickname">  {{wxuser.nickname}} </div>
        </div>

      </div>

      <!--完善代理信息-->
      <div v-show="step==1">
        <md-field>
          <md-input-item
            title="真实姓名"
            type="text"
            placeholder="请填写代理的真实姓名"
            v-model="wxuser.real_name"
          ></md-input-item>
          <md-input-item
            title="身份证号码"
            type="text"
            v-model="wxuser.id_num"
            placeholder="请填写代理的身份证号码"
          ></md-input-item>
          <md-input-item
            title="分佣比例"
            type="digit"
            v-model="wxuser.fxprecent"
            placeholder="请填写分佣比例"
          > <span slot="right">%</span> </md-input-item>
        </md-field>

      </div>

      <div class="btzone">
        <div v-show="!step==0" @click="prestep">上一步</div>
        <div v-show="wxuser.uid>0&&step==0" @click="nextstep">下一步</div>
        <div v-show="step==1" @click="toconfirm">确定</div>
      </div>
    </div>
</template>

<script>
import {Toast} from 'mand-mobile'
export default {
  name: 'add',
  data () {
    return {
      imageList: {
        reader0: []
      },
      steps: [ {name: '查找用户'}, {name: '完善代理信息'}, {name: '确认'} ],
      step: 0,
      errtxt: '',
      wxuser: {
        head_img: '',
        nickname: '',
        openid: '',
        uid: '',
        real_name: '',
        id_num: '',
        fxprecent: 0
      }
    }
  },
  created: async function () {

  },
  beforeMount: async function () {

  },
  mounted: async function () {
  },
  methods: {
    prestep () {
      if (this.step !== 0) {
        this.step--
      }
    },
    nextstep () {
      this.step++
    },
    async toconfirm () {
      if (this.wxuser.fxprecent >= 20) {
        Toast.failed('分销比例不能超过20%');
        this.wxuser.fxprecent = 19
        return false
      }

      let _postData = {
        uid: this.wxuser.uid,
        real_name: this.wxuser.real_name,
        id_num: this.wxuser.id_num,
        fxprecent: this.wxuser.fxprecent,
        agent: 1,
        rid: this.$store.state.agent.openid ? this.$store.state.agent.openid : 1
      }
      let res = await this.$api.post('/fx/setAgent', _postData)
      if (res.data.state) {
        Toast.succeed('设置成功')
      } else {
        Toast.succeed('设置失败')
      }
    },
    onReaderSelect (name, {files}) {
      files.forEach(file => {
        console.log(file)
        console.log('[Mand Mobile] ImageReader Selected:', 'File Name ' + file.name)
      })
      Toast.loading('图片读取中...')
    },
    async onReaderComplete (name, {dataUrl, file}) {
      const demoImageList = this.imageList[name] || []

      // 执行上传
      let formData = new FormData()

      formData.append('file', file)
      if (file) {
        Toast.loading('上传中请等待')
        let res = await this.$api.post('/fx/uploadimg', formData, {
          headers: {'Content-Type': 'multipart/form-data'}
        })
        if (res.data.fileName) {
          demoImageList.push('http://tmc.guotaijinxing.com/public/avt/' + res.data.fileName)
          Toast.succeed('上传成功')
        } else {
          Toast.failed('上传失败请重新上传')
        }
      }

      this.$set(this.imageList, name, demoImageList)
    },
    onReaderError (name, {msg}) {
      Toast.failed(msg)
    },
    onDeleteImage (name, index) {
      const demoImageList = this.imageList[name] || []
      demoImageList.splice(index, 1)
      this.$set(this.imageList, name, demoImageList)
    },
    getwxUser: async function (name, val) {
      if (val.length === 11) {
        let _res = await this.$api.post('/fx/getuserbyphone', {phone: val})
        if (_res.data.state) {
          const _u = _res.data.data
          if (!_u.nickname) {
            this.errtxt = '该用户没有关注微信公众号'
            return false
          }
          this.wxuser = _u
        } else {
          Toast.failed(_res.data.info)
        }
      } else {
        this.wxuser = {}
      }
    }
  }
}
</script>

<style>
  .wxinfo{
    width: 33vw;
    margin: 0 auto;
    padding-top: 25px;
  }
  .wxavt{
    width: 33vw;
    height: 33vw;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #e9e9e9;
    margin-bottom: 15px;
  }
  .wxavt img{
    height: 100%;
    width: 100%;
  }
  .btzone{
    height: 35px;
    width: 66vw;
    margin:30px auto;
    display: flex;
    justify-content: space-around;
  }
  .btzone > div{
    width: 28vw;
    line-height: 35px;
    text-align: center;
    color:#fff;
    background-color: #fc9153;
  }
</style>
<style lang="stylus" scoped>
  .stitle
    font-size:14px;
    line-height:2;
    padding:10px

  .md-example-child-reader
    padding:10px
    .image-reader-list
      float left
      width 100%
      .image-reader-item
        position relative
        float left
        width 23.5%
        padding-bottom 23.5%
        margin-bottom 2%
        margin-right 2%
        background color-bg-base
        box-sizing border-box
        list-style none
        border-radius radius-normal
        hairline(all, color-border-base)
        background-size cover
        &:nth-of-type(4n)
          margin-right 0
        &.add
          .md-icon
            position absolute
            top 40%
            left 50%
            transform translate(-50%, -50%)
            opacity .5
          p
            position absolute
            top 50%
            left 0
            width 100%
            margin-top 15px
            font-size font-minor-normal
            color color-text-disabled
            text-align center
        .image-reader-item-del
          position absolute
          top 5px
          right 5px
          z-index 3
          background #EEE
          border-radius radius-circle

</style>
